<template>
    <div>
        <canvas id="canvas" class="canvas"></canvas>
        <!-- <video></video> -->
    </div>
</template>
<script>
import Hls from 'hls.js'
export default {
    mounted() {
        var canvas = document.querySelector('canvas')
        let ctx
        if (canvas.getContext) {
            ctx = canvas.getContext('2d')
            canvas.height = window.innerHeight * 2
            canvas.width = window.innerWidth * 2
            // if (Hls.isSupported()) {
            console.log('hls', Hls)
            let video = document.createElement('video')
            // let video = document.querySelector('video')
            let hls = new Hls()
            hls.loadSource('https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8')
            hls.attachMedia(video)
            console.log('video', video)
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play()
                setInterval(() => {
                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
                }, 20);
            })
            // }

        }
    }
}
</script>
<style>
.canvas {
  width: 500px;
  height: 500px;
}
</style>
